<template>
	<view class="Step_three">
		<StepInput :title="'手机号码'"  class="mb">
			 <u-input v-model="query.mobile" @input="changeModle" type="number" :border="false" :clearable="false" input-align="right" maxlength="11" placeholder="请填写手机号码"/>
		</StepInput>
		<StepInput :title="'微信二维码'" class="mb">
			 <image   :src="query.wechat_image?query.wechat_image:$IMG_URL('/static/user/upload.png')" @tap.stop="changeWechatImage" :clearable="false" mode="" class="upload_img"></image>
		</StepInput>
		<StepInput :title="'微信号'"  class="mb">
			 <u-input v-model="query.wechat"  @input="changeWechat" type="text" :border="false" :clearable="false" input-align="right" placeholder="请填写微信号"/>
		</StepInput>
		<view class="comlum_Y">
			<view class="left">
				<view class="star">
					*
				</view>
				<view class="size">
					证书（健身类）
				</view>
			</view>
			<view class="photo">
				<image :src="$IMG_URL('/static/user/upload.png')" mode="" class="upload" v-if="photo.length < 9" @tap="uploadCertImg"></image>
				<view v-for="(item,index) in query.cert_image_list" :key="index" class="Item">
					<image :src="item" mode="" class="img"></image>
					<image :src="$IMG_URL('/static/user/close.png')" mode="" class="close" @click="certClose(item, index)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import StepInput from './StepInput.vue'
	
	export default {
		components: {
			StepInput
		},
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			}
		},
		data(){
			return{
				photo:[],
			}
		},
		methods:{
			certClose(item, index){
				this.$emit('certClose', index)
			},
			uploadCertImg(){
				this.$emit('uploadCertImg')
			},
			changeModle(e){
				this.$emit('changeModle', e)
			},
			changeWechatImage(e){
				this.$emit('changeWechatImage', e)
			},
			changeWechat(e){
				this.$emit('changeWechat', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload_img {
		width: 204rpx;
		height: 204rpx;
	}
	.mb{
		margin-bottom: 48rpx;
	}
	.Step_three {
		margin-top: 24rpx;
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		.comlum_Y{
			display: flex;
			flex-direction: column;
			width: 622rpx;
			
		}
		.left {
			display: flex;
			flex-direction: row;
			flex: 1;
			margin-bottom: 24rpx;
		
			.star {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #f37364;
			}
		
			.size {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
			}
		}
	}	
	.upload_img {
		width: 204rpx;
		height: 204rpx;
	}
	.photo{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}
	.upload{
		width: calc((100% - 24rpx) / 3);
		height: 204rpx;
		 margin-right: 12rpx; /* 右边距 */
		margin-bottom: 12rpx;
	}
	.upload:last-child {
	  margin-right: 0; /* 如果是最后一个元素，移除右边距 */
	}
	.Item:nth-child(3n) {
	  margin-right: 0; /* 每行的第三个元素没有右边距 */
	}
	.Item{
		 width: calc((100% - 24rpx) / 3); /* 每行三个元素，包括间距 */
		height: 204rpx;
		background: rgba(0,0,0,0.00);
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		margin-right: 12rpx; /* 右边距 */
		margin-bottom: 12rpx;
		.close{
			position: absolute;
			right: 0;
			top: 0;
			width: 52rpx;
			height: 52rpx;
		}
		.img{
			width: 100%;
			height: 100%;
		}
	}
</style>